<template>
    <div class="flex">
        <el-select :size="size" @change="filterChange" v-model="filterOption.field" :clearable="clearable"
                   :placeholder="$t('components.page.option.field-range.field')" style="width:100px">
            <el-option :key="index" v-for="(item, index) in fieldList" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input :size="size" @change="filterChange" v-model="filterOption.min" :clearable="clearable"
                  :placeholder="$t('components.page.option.field-range.min')" style="width:100px"></el-input>
        <el-input :size="size" @change="filterChange" v-model="filterOption.max" :clearable="clearable"
                  :placeholder="$t('components.page.option.field-range.max')" style="width:100px"></el-input>
    </div>
</template>

<script>
export default {
    name: "PageOptionFieldRange",
    model: {
        prop: 'fieldRange',
        event: 'change'
    },
    props: {
        size: {
            type: String,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true
        },
        fieldRange: {
            type: Object,
            default: () => ({
                field: '',
                min: null,
                max: null,
            }),
        },
        fieldList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            filterOption: {
                field: '',
                min: null,
                max: null,
            },
        }
    },
    watch: {
        fieldRange: {
            deep: true,
            immediate: true,
            handler: function (n, o) {
                this.filterOption = _.cloneDeep(n);
            },
        }
    },
    methods: {
        filterChange() {
            this.$emit('change', this.filterOption);
        },
    }
}
</script>

<style scoped>

</style>
